<template>
  <div class="nurse-service">
    <!-- <div class="video-container">
        <video style="width: 100vw;height: 162px;" src="https://storage.360buyimg.com/jxfe/ppms/c/202501/16/dd5f3066-341a-49fd-8f6d-9a845b87184b.mp4" autoplay muted loop></video>
    </div> -->
    <div class="search-bar" style="margin-top: -6px;">
      <input type="text" placeholder="搜索服务项目" />
      <button>搜索</button>
    </div>

    <!-- <div class="categories">
      <div class="category active">
        <div class="category-icon">推</div>
        <div class="category-text">推荐</div>
      </div>
      <div class="category">
        <div class="category-icon">护</div>
        <div class="category-text">护士到家</div>
      </div>
      <div class="category">
        <div class="category-icon">营</div>
        <div class="category-text">营养保健</div>
      </div>
      <div class="category">
        <div class="category-icon">药</div>
        <div class="category-text">正品好药</div>
      </div>
      <div class="category">
        <div class="category-icon">器</div>
        <div class="category-text">医疗器械</div>
      </div>
    </div> -->

    <div class="tags">
      <!-- <span class="tag">京东自营</span>
      <span class="tag">价格透明</span>
      <span class="tag">三甲标准</span>
      <span class="tag">全国覆盖</span> -->
      <!-- <img src="../assets/2.webp" alt=""> -->
    </div>

    <div class="service-grid">
      <div class="service-item" @click="selectService('vital-signs')">
        <div class="service-icon">
            <img src="../assets/1.png" alt="">
        </div>
        <div class="service-name">生命体征检测</div>
      </div>
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/302105/39/7505/14584/682ebd85F6ad72409/30d55e17f098d332.png.webp" alt="">
        </div>
        <div class="service-name">打针采血</div>
      </div> -->
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/316602/21/2625/16150/682ebdc4F0f425fc3/3d4ce060b67f5e2b.png.webp" alt="">
        </div>
        <div class="service-name">换药拆线</div>
      </div> -->
      <div class="service-item" @click="selectService('tcm-care')">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/307227/3/3139/11395/682ebddeF62e66829/315f05d224cf6f0e.png.webp" alt="">
        </div>
        <div class="service-name">中医护理</div>
      </div>
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/289580/12/7139/17135/682ebea5F86131b22/1143668a18539570.png.webp" alt="">
        </div>
        <div class="service-name">外卖买药</div>
      </div> -->
      <div class="service-item" @click="selectService('medical-accompany')">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/309941/28/2846/12483/682ebe92F2d9234df/f05eda60ccbe59d0.png.webp" alt="">
        </div>
        <div class="service-name">就医陪诊</div>
      </div>
      <div class="service-item" @click="selectService('bedridden-care')">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/299973/30/7818/13388/682ebd6cF5cf29fd5/1a9da01dbe636fae.png.webp" alt="">
        </div>
        <div class="service-name">卧床护理</div>
      </div>
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/287865/17/8036/11539/682ebda3Fa5781140/8f60ebc734fc78ec.png.webp" alt="">
        </div>
        <div class="service-name">母婴照护</div>
      </div> -->
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/jfs/t1/317023/20/8089/11403/004f1a01Faebca15b/2a675fd29dad2308.gif" alt="">
        </div>
        <div class="service-name">护士招募</div>
      </div> -->
      <div class="service-item" @click="selectService('stroke-rehab')">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/287633/28/8797/4247/682ebe67F7dcd8047/3939c63cdf3cbc7c.png.webp" alt="">
        </div>
        <div class="service-name">卒中后康复</div>
      </div>
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/310944/4/8736/13419/68493722Fff4883c4/cedb758d39d0f36e.png.webp" alt="">
        </div>
        <div class="service-name">美肤护理</div>
      </div>     -->
      <!-- <div class="service-item">
        <div class="service-icon">
            <img src="https://m11.360buyimg.com/babel/s150x150_jfs/t1/314764/40/3081/13037/682ebe7eF7e7f3db3/6d391bd789db31ea.png.webp" alt="">
        </div>
        <div class="service-name">器械租赁</div>
      </div> -->
    </div>

    <!-- <div class="promotion"> -->
      <!-- <div class="promo-content">
        <h3>头颈肩腰背疼调理</h3>
        <p>风寒湿痹肌肉劳损</p>
        <div class="promo-tag">新人首单立减110</div>
        <div class="promo-price">¥99<span>起/次</span></div>
        <button @click="makeAppointment('头颈肩腰背疼调理', 99)">立即预约</button>
      </div> -->
      <!-- <div class="promo-image">
        <img src="https://m11.360buyimg.com/babel/s516x540_jfs/t1/257813/10/10893/73371/6780f9e3Fbafa885c/ce71aab398484726.png.webp" alt="">
      </div> -->
    <!-- </div> -->

    <!-- <div class="appointment-button" @click="makeAppointment()">
      <span>立即预约</span>
    </div> -->

    <!-- <div class="bottom-space"></div> -->
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['select-service', 'show-appointment']);

function selectService(service) {
  if (service) {
    emit('select-service', service);
  }
}

function makeAppointment(serviceName, price) {
  emit('show-appointment', {
    serviceName: serviceName || '护士到家服务',
    price: price || 99,
    source: 'home'
  });
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nurse-service {
  width: 100vw;
  max-width: 100vw;
  background-color: #f5f5f5;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #00a163;
  color: white;
  padding: 15px 0;
  text-align: center;
  width: 100vw;
}

.header h1 {
  font-size: 18px;
  margin: 0;
}

.search-bar {
  display: flex;
  padding: 10px;
  background-color: #00a163;
  width: 100vw;
  margin: 0;
}

.search-bar input {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 20px 0 0 20px;
  outline: none;
}

.search-bar button {
  padding: 8px 15px;
  background-color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  color: #ff6b00;
  font-weight: bold;
}

.categories {
  display: flex;
  overflow-x: auto;
  padding: 10px 5px;
  justify-content: space-between;
  background-color: white;
  margin-bottom: 8px;
  width: 100vw;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  padding: 0 5px;
}
.category-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.category.active .category-icon {
  background-color: #00a163;
  color: white;
}

.category-text {
  font-size: 12px;
  text-align: center;
}

.tags {
  display: flex;
  /* padding: 8px 10px; */
  background-color: white;
  margin-bottom: 8px;
  overflow-x: auto;
  width: 100vw;
}

.tag {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
  white-space: nowrap;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background-color: white;
  padding: 15px;
  margin-bottom: 8px;
  width: 100vw;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.service-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.service-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion {
  background-image: url('https://m11.360buyimg.com/babel/s516x540_jfs/t1/257813/10/10893/73371/6780f9e3Fbafa885c/ce71aab398484726.png.webp') ;
  /* background-size: cover; */
  background-position: center;
  /* background-repeat: no-repeat; */
  padding: 15px 10px;
  display: flex;
  margin-bottom: 8px;
  width: 100vw;
}

.promo-content {
  flex: 1;
}

.promo-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.promo-content p {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.promo-tag {
  display: inline-block;
  padding: 3px 8px;
  background-color: #fff0f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 8px;
}

.promo-price {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: bold;
  margin-bottom: 10px;
}

.promo-price span {
  font-size: 12px;
  font-weight: normal;
  color: #666;
  margin-left: 2px;
}

.promo-content button {
  padding: 6px 15px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 14px;
}

.promo-image {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 12px;
}

.appointment-button {
  position: fixed;
  bottom: 70px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(255, 77, 79, 0.3);
  z-index: 99;
}

.appointment-button span {
  text-align: center;
}

.bottom-space {
  height: 60px;
}

@media screen and (max-width: 375px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
  }
  
  .service-icon {
    width: 50px;
    height: 50px;
  }
  
  .service-name {
    font-size: 14px;
  }
}

@media screen and (max-width: 320px) {
  .service-icon {
    width: 45px;
    height: 45px;
  }
  
  .service-name {
    font-size: 12px;
  }
}
</style>